<template>
	<view class="login-content">
		<view class="login-box">
			<image src="../../static/index/logo.png" mode=""></image>
			<view class="login-btn">
				<u-button type="success" shape="circle" @click="loginshow = true" :custom-style="customStyle">授权登录</u-button>
			</view>

			<u-checkbox-group @change="checkboxGroupChange">
				<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list" :key="index"
					:name="item.name" shape="circle" active-color="rgb(42,192,146)">
					{{item.name}} <span class="agreement" @click.stop="openAgree">《用户协议》</span>和 <span
						class="agreement">《隐私协议》</span>
				</u-checkbox>
			</u-checkbox-group>

			<u-popup v-model="show" mode="bottom" border-radius="14" length="70%">
				<view class="popup-box">
					<view class="agree-title">
						用户协议
					</view>

					<view>用户协议后台编辑修改，用户协议后台编辑修改用户协议后台编辑修改用户协议后台编辑修改用户协议后台编辑修改用户协议，后台编辑修改用户协议后台编辑修改用户协议后台编辑修改。
						用户协议后台编辑修改用户协议后台编辑修改用户协议后台编辑修改用户协议后台，编辑修改用户协议后台编辑修改用户协议后台编辑修改用户协议后台编辑修改用户协议后台编，辑修改用户协议后台编辑修改用户，协议后台编辑修改用户协议后台编辑修改用户协议后台编辑修改用户协议后台编辑修改用户协议后台编辑修改用户协议后台，编辑修改用户协议后台编辑修改用户协议后台编辑修改用户协议后台编辑，修改用户协议后台编辑修改用户协议后台编辑修改用户协议后台，编辑修改用户协议后台编辑修改用户协议，后台编辑修改用户协议后台编辑修改用户协议后台编辑修改。
					</view>
				</view>
			</u-popup>

			<u-popup v-model="loginshow" mode="bottom" border-radius="14" length="30%">
				<view class="popup-box">
					<view class="agree-title">
						获取授权
					</view>
					<view style="width: 61%;text-align: center; margin: 0 auto;margin-bottom: 20rpx;">申请获取您的手机号用于注册，
						完成后可使用更多功能
					</view>
					<view class="login-btn">
						<u-button type="success" :custom-style="customStyle" shape="circle">获取抖音手机号</u-button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle:{
					backgroundColor:'#2AC092'
				},
				loginshow:false,
				show: false,
				list: [{
					name: '我已阅读并同意',
					checked: false,
					disabled: false
				}]
			}
		},
		methods: {
			openAgree() {
				this.show = true
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				//console.log(e);
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				// console.log(e);
			},
		}
	}
</script>

<style lang="scss">
	.login-box {
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;

		>image {
			width: 200rpx;
			height: 200rpx;
			margin: 200rpx;
		}

		.login-btn {
			width: 85%;
			margin: 0 auto;
			margin-bottom: 100rpx;
		}
	}

	.agreement {
		color: #2AC092;
	}

	.popup-box {
		padding: 30rpx;
		font-size: 30rpx;
		line-height: 2;

		.agree-title {
			text-align: center;
			font-size: 36rpx;
			margin-bottom: 20rpx;
		}
	}
</style>